import React, { Component } from 'react';
import { Select } from 'antd';
import Label from '../LabelDecorator';

@Label()
class FormSelect extends Component {
  renderStaticOptions = () => {
    const options = this.props.getData('datasource').value;
    if (!Array.isArray(options)) {
      return null;
    }
    return options.map((option, index) => (
      <Select.Option key={`${option}${index}`} value={option}>
        {option}
      </Select.Option>
    ));
  };

  render() {
    const { getStyle, getData, labelWidth = 0 } = this.props;
    const multiple = getData('multiple');
    const isStatic = getData('datasource').type === 'static';
    const defaultValue = getData('defaultValue');
    const placeholder = getData('placeholder');
    let mode;
    if (multiple) {
      mode = 'multiple';
    }
    return (
      <Select
        placeholder={placeholder}
        mode={mode}
        style={{ ...getStyle(), width: `calc(100% - ${labelWidth}px)`, height: '100%' }}
        defaultValue={defaultValue}
      >
        {isStatic ? this.renderStaticOptions() : null}
      </Select>
    );
  }
}

export default FormSelect;
